
<template>
<!-- 美团对账正常单    美团对账异常单 -->
    <div class="storeInfo">
        <div class="head">
            <el-form class="headForm">
                <!-- date: 2020-02
order_id: 
store_info_id: 
business_type: 
pay_from: 
 -->
                <el-form-item style="width:230px">
                    <el-date-picker
                        v-model="form.date"
                        type="month"
                        value-format="yyyy-MM"
                        placeholder="选择月份">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="">
                    <el-input v-model="form.order_id" placeholder="订单号"></el-input>
                </el-form-item>
                
                <el-form-item label="">
                    <el-select clearable v-model="form.store_info_id" placeholder="选择门店">
                        <el-option v-for="(item,a) in storeList" :key="a" :label="item.title" :value="item.store_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-select clearable v-model="form.business_type" placeholder="业务类型">
                        <el-option v-for="item in businessType" :key="item.status" :label="item.status_cn" :value="item.status"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-select clearable v-model="form.type" placeholder="交易类型">
                        <el-option v-for="item in dealList" :key="item.status" :label="item.status_cn" :value="item.status"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-select clearable v-model="form.pay_from" placeholder="支付方式">
                        <el-option v-for="item in payforlist" :key="item.status" :label="item.status_cn" :value="item.status"></el-option>
                    </el-select>
                </el-form-item>

                <el-button type="danger" @click="search" >搜索</el-button> 
                <el-button type="danger" @click="exportInfo" >导出明细</el-button> 
                <!-- <el-button class="btnTxt">结算金额合计:121231545元</el-button>  -->
                
            </el-form>
        </div> 
        <div class="iDataW">
            <div class="ulHead">
                
                <div class="li" v-for="item in echart" :key='item.title'>                    
                    <span>{{item.title}}</span><br/>
                    <span class="bigFont">{{item.total}}</span>   
                    <p  class="symbol">{{item.sm}}</p>                                   
                </div>
                
            </div>
        </div>
        <div class="chartBox">
            <div class="chartItem">
                <div id="chartItem0" class="chartItemCanvas"></div>
                <p class="arrow"></p>
            </div>
            <div class="chartItem">
                <div id="chartItem1" class="chartItemCanvas"></div>
                <p class="arrow"></p>
            </div>
            <div class="chartItem">
                <div id="chartItem2" class="chartItemCanvas"></div>
                <p class="arrow"></p>
            </div>
            <div class="chartItem">
                <div id="chartItem3" class="chartItemCanvas"></div>
                <p class="arrow"></p>
            </div>
        </div>
        <!-- table -->
        <div class="tabContainer">
            <el-table :data="tableData" stripe style="width: 100%;text-align:center">
                <!-- 															 -->
                <el-table-column prop="account_time" label="交易时间" fixed></el-table-column>
                <el-table-column prop="order_id" label="订单号" width="200"> </el-table-column>
                <el-table-column prop="title" label="门店" width="240"></el-table-column>
                <el-table-column prop="type_cn" label="交易类型"></el-table-column>

                <el-table-column prop="business_type_cn" label="业务类型"></el-table-column>               
                <el-table-column prop="pay_from_cn" label="支付方式"></el-table-column>
                <el-table-column prop="order_price" label="金额" width="230"></el-table-column>
                <el-table-column prop="total_price" label="实付" width="230"></el-table-column>
                <el-table-column prop="pay_fee" label="手续费" width="230"></el-table-column>

                <el-table-column prop="account_price" label="到账金额"></el-table-column>


            </el-table>                       
        </div>
        <!-- 分页部分 -->
        <!-- 分页部分 -->
        <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            @current-change="changePage"
            :page-size="size"
            :current-page.sync="pageNum"
            :hide-on-single-page=true
            :total="total">{{total}}
        </el-pagination>
        
      


    </div>
  
</template>
<style lang="scss" scoped>
.chartBox{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    height:450px;
    margin-top:20px;
    padding:0 5px;
    margin-bottom:8px;
    .chartItem{
        margin:0 5px;
        background:#fff;
        position: relative;
        width: 25%;
        border-radius: 5px;
        .arrow{
            width: 0;
            height: 0;
            border-right: 12px solid transparent;
            border-left: 12px solid transparent;
            border-bottom: 8px solid #fff;
            position: absolute;
            top: -8px;
            left: 50%;
            margin-left: -12px;
        }
        .chartItemCanvas{
            width:100%;
            height:450px;
        }
    }
}
.iDataW{
    padding:0 10px;
    margin-top:5px;
    .ulHead{
        display: flex;
        flex-direction:row;
        justify-content:space-between;
        height:48px;
        background:#fff;   
        font-size:14px;
        padding:5px 8px;
        border-radius:3px; 
        color:#7e8c8d;    
        .li{
            width:25%;
            flex:1;
            text-align: center;
            .bigFont{
                font-size:26px;
                text-align: left;
                font-weight:900;
                color:#000;
                margin-top:5px;
            } 
            .symbol{
                font-size:30px;
                font-weight: 900;
                color:#000;
                width:20px;
                float:right;
                margin-top:-6px;
            }
        }
        

    }  
}
</style>
<style>
.setWidth{width:140px !important}
</style>
<script>
import Vue from 'vue';
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js'; 

import myCharts from '../../../../js/account_detail_echarts.js'
Vue.use(myCharts)


let dateO = new Date();
let y = dateO.getFullYear();
let ms = dateO.getMonth()+1
let m = ms>9?ms:'0'+ms
let da = y+'-'+m
export default {
   name: 'HelloWorld',
    data () {
    return {
        businessType:[
            {status:'1',status_cn:"商品订单消费"},
            {status:'2',status_cn:"vip充值"},
            {status:'3',status_cn:"损坏赔偿"},
        ],//业务类型
        dealList:[
            {status:'1',status_cn:"入账"},
            {status:'2',status_cn:"出账"}
        ],//交易类型
        payforlist:[
            {status:'2',status_cn:"微信支付"},
            {status:'1',status_cn:"支付宝支付"},
            {status:'3',status_cn:"POS支付"},
            {status:'4',status_cn:"美团券支付"},
            {status:'5',status_cn:"备用金支付"},
            {status:'6',status_cn:"VIP卡支付"},
            {status:'7',status_cn:"0元下单"},
            {status:'8',status_cn:"优惠券"},
            {status:'9',status_cn:"口碑券支付"},
            {status:'10',status_cn:"ALIPAY"},
            {status:'11',status_cn:"WECHATPAY"},
            {status:'12',status_cn:"门店卡支付"},
        ],// 支付类型
        form:{
            page:1,
            size:20,
        },
        tableData:[],
        total:50,
        size:20,
        pageNum:1,
        
        echart:[],
        storeList:[],  
    }
  }, 
   mounted(){
        let that = this;
        abc.get(that,potUrl.storefranchisee,{},(res)=> {
            that.storeList = res.data
        })//获取门店列表-
        that.getList();
  },
  methods:{
    search(){
        let that = this;
        //搜索有问题，搜索2019-03数据和2019-04数据是一样的；-error
        that.getList()
    },
    changePage(val){
        var that = this;
        that.pageNum = val;
        that.form.page = val;
        that.getList()
    },
    exportInfo(){
        let iData = '&date=' + this.form.date + '&order_id=' + this.form.order_id + '&store_info_id=' + this.form.store_info_id + '&business_type=' + this.form.type + '&pay_from' + this.form.pay_from;
        let url = hostUrl + '/operate/orderaccount/export' + abc.getSession('params') + iData;
        window.location.href = abc.hostUrl + potUrl.orderaccountexport + iData;
    },
    getList(cb){
        let that = this;
        abc.get(that,potUrl.orderaccountlist,that.form,(res)=>{
            that.tableData=res.data.list;
            that.total = res.data.total;
            if(that.total != 0){
            let obj = res.data.business_type_total;
            let titleArr = ['商品订单消费', 'VIP充值', '损坏赔偿'];
            let eArr = []
            for(let key in obj){
                let EOBJ = {data:[]};
                if(key == 'total_price'){
                    EOBJ.title = '总进账';
                    EOBJ.sm = '='
                }else{
                    EOBJ.title = titleArr[key-1]
                    if(key == titleArr.length){
                        EOBJ.sm = ''
                    }else{
                        EOBJ.sm = '+'
                    }
                    
                }
                $.each(obj[key], function(i, k) {
                    if (i != 'total_price') {
                        switch (i) {
                            case '1':
                                var str = {
                                    value: k,
                                    name: '支付宝'
                                }
                                break;
                            case '2':
                                var str = {
                                    value: k,
                                    name: '微信'
                                }
                                break;
                            case '3':
                                var str = {
                                    value: k,
                                    name: 'POS'
                                }
                                break;
                            case '4':
                                var str = {
                                    value: k,
                                    name: '美团'
                                }
                                break;
                            case '9':
                                var str = {
                                    value: k,
                                    name: '口碑'
                                }
                                break;
                            case '10':
                                var str = {
                                    value: k,
                                    name: 'ALIPAY'
                                }
                                break;
                            case '11':
                                var str = {
                                    value: k,
                                    name: 'WECHATPAY'
                                }
                                break;
                            default:
                                break;
                        }
                        EOBJ.data.push(str);
                    }else{
                        EOBJ.total = k;
                    }

                });
                eArr.push(EOBJ)
            } 
            let last = eArr.pop();
            eArr.splice(0,0,last)
            that.echart = eArr;
            that.echart.map((item,i)=>{
                that.$chart.orderEchart('chartItem'+i,item.data);
            })
            }
        })//列表
    }
  }
}
</script>
